<template>
	<div class="user-profit">
		<div class="up-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				<div class="c-items">
					<p class="c-item TB"
						@click="change(1)"
						:class="{ active: isTb}"
					>淘宝</p>
					<p class="c-item PDD"
						@click="change(3)"
						:class="{ active: isPdd}"
					>拼多多</p>
					<p class="c-item JD"
						@click="change(2)"
						:class="{ active: isJd}"
					>京东</p>
				</div>
			</div>
		</div>
		<div class="no-place"></div>
		<div class="up-total">
			<p>累计收入</p>
			<span>{{credit}}</span>
		</div>
		<div class="up-items border-1px">
			<div class="up-i-header">
				结算预估收入
			</div>
			<div class="up-item">				
				<div class="up-i"
					@click="alert(1)"
				>
					<p>￥{{list.bill_income}}</p>
					<span>本月结算预估<i class="iconfont">&#xe62a;</i></span>
				</div>
								
				<div class="up-i"
					@click="alert(2)"
				>
					<p>￥{{list.last_income}}</p>
					<span>上月结算预估<i class="iconfont">&#xe62a;</i></span>
				</div>
			</div>
		</div>
		<div class="up-items">
			<div class="up-i-header">
				付款预估收入
			</div>
			<div class="up-item">
				<div class="up-i"
					@click="alert(3)"
				>
					<p>￥{{list.predict_income}}</p>
					<span>本月付款预估<i class="iconfont">&#xe62a;</i></span>
				</div>
				<div class="up-i"
					@click="alert(4)"
				>
					<p>￥{{list.last_revenue}}</p>
					<span>上月付款预估<i class="iconfont">&#xe62a;</i></span>
				</div>
			</div>
		</div>
		<div class="up-today">
			<div class="up-t-header border-1px">
				<i class="icon"></i>今日
			</div>
			<div class="up-t-items">
				<div class="up-t-item borderight-1px"
					@click="alert(5)"
				>
					<p>付款笔数<i class="iconfont">&#xe62a;</i></p>
					<span>{{list.today_payments}}</span>
				</div>
				<div class="up-t-item"
					@click="alert(6)"
				>
					<p>预估佣金(元)<i class="iconfont">&#xe62a;</i></p>
					<span>￥{{list.today_commission}}</span>
				</div>
			</div>
		</div>
		<div class="up-today">
			<div class="up-t-header border-1px">
				<i class="icony"></i>昨日
			</div>
			<div class="up-t-items">
				<div class="up-t-item borderight-1px"
					@click="alert(5)"
				>
					<p>付款笔数<i class="iconfont">&#xe62a;</i></p>
					<span>{{list.yesterday_payments}}</span>
				</div>
				<div class="up-t-item"
					@click="alert(7)"
				>
					<p>预估佣金(元)<i class="iconfont">&#xe62a;</i></p>
					<span>￥{{list.yesterday_commission}}</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { Toast, MessageBox } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				isTb: true,
				isJd: false,
				isPdd: false,
				title: '',
				msg: '',
				type: 1,
				list: [],
				credit: this.$route.query.credit
			}
		},
		mounted(){
			var params = new URLSearchParams();
			params.append('type', this.type);
			axios.post(Http.TOTALINCOME, params)
			.then( res => {
				var ret = res.data;
				this.list = ret.data;
			})
		},
		methods: {
			alert(type){
				if( type == 1){
					this.title = "本月结算收入";
					this.msg = "本月内确认收货的订单收益";
					MessageBox({
					  	title: this.title,
					  	message: this.msg,
					});
				}else if ( type == 2){
					this.title = "上月结算收入";
					this.msg = "上个月内确认收货的订单收益";
					MessageBox({
					  	title: this.title,
					  	message: this.msg,
					});
				}else if ( type == 3){
					this.title = "本月付款收入";
					this.msg = "本月内已付款的订单收益";
					MessageBox({
					  	title: this.title,
					  	message: this.msg,
					});
				}else if ( type == 4){
					this.title = "上月付款收入";
					this.msg = "上个月内已付款的订单收益";
					MessageBox({
					  	title: this.title,
					  	message: this.msg,
					});
				}else if ( type == 5){
					this.title = "付款笔数";
					this.msg = "所有付款的订单数量，只包含有效订单";
					MessageBox({
					  	title: this.title,
					  	message: this.msg,
					});
				}else if ( type == 6){
					this.title = "今日预估佣金";
					this.msg = "今日内创建的有效订单的预估佣金";
					MessageBox({
					  	title: this.title,
					  	message: this.msg,
					});
				}else if ( type == 7){
					this.title = "昨日预估佣金";
					this.msg = "昨日内创建的有效订单的预估佣金";
					MessageBox({
					  	title: this.title,
					  	message: this.msg,
					});
				}


			},
			change: function(id){
				if( id === 1){
					this.isTb = true;
					this.isPdd = false;
					this.isJd = false;
					this.getData(1)
				}else if( id === 2){
					this.isTb = false;
					this.isPdd = false;
					this.isJd = true;
					this.getData(2)
				}else if( id === 3){
					this.isTb = false;
					this.isPdd = true;
					this.isJd = false;
					this.getData(3)
				}
			},
			getData(type){
				var params = new URLSearchParams();
				params.append('type', type);
				axios.post(Http.TOTALINCOME, params)
				.then( res => {
					var ret = res.data;
					this.list = ret.data;
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user-profit{
		.up-header{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 0.88rem;
			line-height: 0.88rem;
			background: #fff;
			.back{
				position: absolute;
				top: 0;
				left: 0;
				width: 0.88rem;
				height: 0.88rem;
				line-height: 0.88rem;
				i{
					font-size: 0.44rem;
				}
			}
			.content{
				margin: 0 1rem;
				.c-items{
					display: flex;
					margin-left: 20%;
					margin-top: 0.14rem;
					width: 60%;
					height: 0.6rem;
					line-height: 0.6rem;
					border-radius: 0.6rem;
					border: 0.01rem solid #ff3d00;
					color: #ff3d00;
					.c-item{
						flex: 0 0 33.33%;
						height: 100%;
						&.TB{
							border-radius: 0.6rem 0 0 0.6rem;
						}
						&.JD{
							border-radius: 0 0.6rem 0.6rem 0;
						}
						&.active{
							background: #ff3d00;
							color: #fff;
						}
					}
				}
			}
		}
		.up-total{
			width: 100%;
			height: 2rem;
			background: url(../assets/img/shouru_topbanner.png) center center no-repeat;
			background-size: 100% 100%;
			color: #fff;
			p{
				padding-top: 0.4rem;
				margin-bottom: 0.2rem;
				font-size: 0.26rem;
			}
			span{
				font-weight: bold;
				font-size: 0.36rem;
			}
		}
		.up-items{
			padding-top: 0.2rem;
			padding-bottom: 0.3rem;
			font-size: 0.26rem;
			.up-i-header{
				height: 0.66rem;
				line-height: 0.66rem;
				font-weight: bold;
			}
			.up-item{
				display: flex;
				align-items: center;
				.up-i{
					flex: 0 0 50%;
					p{
						margin-bottom: 0.2rem;
						font-weight: bold;
					}
					span{
						.iconfont{
							font-size: 0.3rem;
							color: #7bb7f3;
						}
					}
				}
			}
		}
		.up-today{
			border-top: 0.2rem solid #f5f5f5;
			.up-t-header{
				padding: 0 0.24rem;
				height: 0.6rem;
				line-height: 0.6rem;
				text-align: left;
				i{
					display: inline-block;
					vertical-align: middle;
					margin-right: 0.1rem;
					width: 0.6rem;
					height: 0.6rem;
					&.icon{
						background: url(../assets/img/icon_today.png) center center no-repeat;
						background-size: 0.34rem;
					}
					&.icony{
						background: url(../assets/img/icon_yestoday.png) center center no-repeat;
						background-size: 0.34rem;
					}
				}
			}
			.up-t-items{
				display: flex;
				align-items: center;
				.up-t-item{
					flex: 0 0 50%;
					padding: 0.2rem 0;
					p{
						margin-bottom: 0.2rem;
						i{
							color: #7bb7f3;
							font-size: 0.30rem;
						}
					}
					span{
						font-size: 0.28rem;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>